<template>
  <s-modal title="详情" :visible="visible" width="1000px" :footer="null" @cancel="visible = false">
    <div style="height: 650px">
      <s-scroll>
        <s-form :value="formValue">
          <s-form-item label="父菜单">
            <s-select-tree
              v-model="formValue.parentId"
              disabled
              allow-clear
              url="/menu/item/list"
              value-field="id"
              label-field="title"
            />
          </s-form-item>
          <s-form-item label="标题">
            <s-input v-model="formValue.title" disabled />
          </s-form-item>
          <s-form-item label="组件">
            <s-input v-model="formValue.component" disabled allow-clear placeholder="组件" />
          </s-form-item>
          <s-form-item label="路径">
            <s-input v-model="formValue.path" disabled allow-clear />
          </s-form-item>
          <s-form-item label="图标">
            <s-input v-model="formValue.icon" disabled allow-clear />
          </s-form-item>
          <s-form-item label="排序号" name="orderNum">
            <s-input-number v-model="formValue.orderNum" disabled :min="1" :max="999" />
          </s-form-item>
          <s-form-item label="角色列表" name="roleList">
            <s-tree
              ref="roleList"
              v-model="formValue.roleList"
              disabled
              height="200px"
              url="/authority/role/selectList"
              value-field="id"
            />
          </s-form-item>
          <s-form-item label="权限列表" name="permissionList">
            <s-tree
              ref="permissionList"
              v-model="formValue.permissionList"
              disabled
              height="200px"
              url="/authority/permission/selectList"
              value-field="id"
            />
          </s-form-item>
          <s-form-item label="创建人">
            <s-input v-model="formValue.createByAccount" disabled />
          </s-form-item>
          <s-form-item label="创建时间">
            <s-input v-model="formValue.createDate" disabled />
          </s-form-item>
          <s-form-item label="修改人">
            <s-input v-model="formValue.updateByAccount" disabled />
          </s-form-item>
          <s-form-item label="修改时间">
            <s-input v-model="formValue.updateDate" disabled />
          </s-form-item>
          <s-form-item label="备注" name="remark" size="big">
            <s-text-area v-model="formValue.remark" allow-clear />
          </s-form-item>
        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
import { findInTree } from '@/utils/tree'
export default {
  name: 'Detail',
  data() {
    return {
      formValue: {},
      visible: false
    }
  },
  methods: {
    open(id) {
      this.$loading(true)
      this.$api
        .GET('/menu/item/selectOneById', { id: id })
        .then((res) => {
          if (!res.data) {
            this.$loading(false)
            this.visible = false
            this.$message.warn('数据不存在')
          } else {
            const data = res.data
            data.roleList = this.formatSelect(data.roleList)
            data.permissionList = this.formatSelect(data.permissionList)
            this.formValue = data
            this.$loading(false)
            this.visible = true
          }
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    formatValue(val, treeData) {
      const p = []
      if (val && val.length > 0) {
        val.forEach((item) => {
          const tmp = findInTree(treeData, 'id', item)
          p.push({ name: tmp.value, value: tmp.id })
        })
      }
      return p
    },
    formatSelect(val) {
      const p = []
      if (val && val.length > 0) {
        val.forEach((item) => {
          p.push(item.value)
        })
      }
      return p
    }
  }
}
</script>

<style lang="less" scoped></style>
